<%@include file="startUpIncludes.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>
            Profile
        </title>
    <script type="text/javascript" src="../js/modalwin.js">
    </script>
    <script type="text/javascript" src="../js/chatter-scripts.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$('.comments').append('<textarea id="textarea" name="textarea" placeholder="Write a comment..." class="TB commentTA">'+
    			'</textarea><a href="#"  class="form-btn comment-btn" onclick="doAjaxComment();clearDefaults();">Comment</a><div class="valid-line" id ="err2" style = "color:red;display:none">Please,comment Something</div>');

    	});

    </script>
    <script type="text/javascript">
    function clearDefaults(){
    	//alert("inside alert");
    	var key = document.getElementById("textarea");
    	key.value="";
    	}
    </script>
    </head>
    <body> 
    <jsp:include page="header.jsp" >
		<jsp:param value="true" name="loggedIn"/>
	</jsp:include>
    <div class="modal-win-bg">
        <div class="modal-win-box">
            <div class="modal-win-hd">
                <span class="modal-win-title"></span>
                <span class="modal-win-close">x</span>
            </div>
            <div class="modal-win-content"></div>
            <a class="form-btn modal-win-ok">Start Now</a>
            <a class="form-btn modal-win-ok">Cancel</a>
        </div>
    </div>
    <div class="wrap">
	<div class="fitBG">
        <div class="main">
            <div class="left-menu">
                <span class="icon-status" style="float: left; margin: 5px 5px 7px 7px;"></span>
                <a href="#" class="profile-owner">${userDetails.fName} ${userDetails.lName}</a> 
                <div class="profile-img">
                			<c:choose>
                				<c:when test="${userDetails.photo==null}">
                					<a href="/sales/s/profile"><img src="../images/noprofile.jpg"/></a>
                				</c:when>
                				<c:otherwise>
                					<a href="/sales/s/profile"><img src="${userDetails.photo.encode}"/></a>
                				</c:otherwise>
                			</c:choose> 
                <a href="/sales/s/edit-profile" class="profile-img-change">Change</a>
                </div>
                <a href="edit-profile" style="float: left; clear: both; width: 100%; margin: 7px 0;">Edit Profile</a>
                <h5>Contact</h5>
                <div class="profile-left-block profile-contact">
                    <span>${userDetails.company.companyName}</span>
                    <a href="#">${userDetails.email}</a>
                    <div class="phone">
                        <span>${userDetails.dept}</span>
                        <span>Work</span>
                    </div>
                    <span>${userCountry.countryName}</span>
                </div>
                <h5>About Me</h5>
                
                <div class="profile-left-block">
         	       <span class="info">
                    ${userDetails.empInfo}
                </span>
                </div>
            </div>
            <div class="content">
				<jsp:include page="tabs.jsp" >
					<jsp:param value="profile" name="currentPage"/>
				</jsp:include>
                <div class="tab-content">
               	<div class="chatter">
                <div class="chatter-share-actions">
                    <%-- <span>Post</span><a href="#"></a>
                    <span>File</span><a href="#"></a>
                    <span>Link</span><a href="#"></a> --%>
                    <textarea class="TB" placeholder="What are you working on?" name="post" id="post"></textarea>
                    <a href="#" onclick="doAjaxPost()" class="form-btn">Share</a>
                    <div class="valid-line" id ="err1" style = "color:red;display:none">Please,post Something</div>
                </div>
			
				
				<c:forEach items="${posts}" var="post">
	                <div class="chatter-block">
						<div class="post" id="${post.id}" >
						<c:choose>
				          <c:when test="${post.poster.photo==null}">
				             <img src="../images/noprofile.jpg" id="post" alt="user photo"/>
				          </c:when>
				          <c:otherwise>
				             <img src="${post.poster.photo.encode}" alt="user photo"/>
				          </c:otherwise>
				        </c:choose>
						<div class="postText">
						 <a href="#" class="poster">${post.poster.fName}</a>
						 <span class="text">${post.postText}</span>
						 <span class="date">${post.postDate}</span>
						 <%-- <a href="#">Comment </a><a href="#"> Like</a> --%>
					</div>
				<div class="comments">
			 	<c:forEach items="${post.comments}" var="comment">
				 <div class="comment">
				  <c:choose>
				          <c:when test="${comment.commenter.photo==null}">
				             <img src="../images/noprofile.jpg" id="post" alt="user photo"/>
				          </c:when>
				          <c:otherwise>
				             <img src="${comment.commenter.photo.encode}" alt="user photo"/>
				          </c:otherwise>
				        </c:choose>
				  <div class="postText">
				   <a href="#" class="poster">${comment.commenter.fName}</a>
				   <span class="text">${comment.commentText}</span>
				   <span class="date">${comment.commentDate}</span>
				   <%-- <a href="#">Comment </a><a href="#"> Like</a> --%>
				  </div>
				 </div>
			 	</c:forEach>
			 	<div class="test"></div>
				</div>
				
				</div>
				</div>
				
			</c:forEach>
			
                </div>
                <div class="right-menu"></div>
                </div>
            </div>
        </div>
	<%@include file="footer.jspf" %>
	</div>
    </div>
    

    </body>
</html>